<template>
  <div>
    <cityheader></cityheader>
    <citylist :citys='provincesChars' :letter='letter'></citylist>
    <cityalphabet :keys='provincesChars.keys' @change='handleletterchange' ></cityalphabet>
  </div>
</template>
<script>
import cityheader from './header.vue'
import axios from 'axios'
import citylist from './citylist.vue'
import cityalphabet from './alphabet.vue'
//  import pinyin from 'pinyin'
  import pinyin4js from 'pinyin4js'
  export default {
    name: 'City',
    data () {
      return {
        provincesChars: {
          citys: {},
          keys: []
        },
        letter:''
      }
    },
    components: {
      cityheader,
      citylist,
      cityalphabet
    },
    methods: {
      handleletterchange(letter){
        this.letter=letter
        console.log(this.letter)
      },
      success(res) {
        let resData = res.data
        resData.forEach(element => {
          if (!element.city)return
          element.city.forEach(ele => {
            let itemFist = PinyinHelper.getShortPinyin(ele.name)[0].toUpperCase();
            if (this.provincesChars.citys.hasOwnProperty(itemFist)) {
              this.provincesChars.citys[itemFist].push(ele.name)
            } else {
              this.provincesChars.citys[itemFist] = [ele.name]
            }
            this.provincesChars.keys.push(PinyinHelper.getShortPinyin(ele.name)[0].toUpperCase())
          });
        })
        this.provincesChars.keys = [...new Set(this.provincesChars.keys)];
        this.provincesChars.keys.sort()
      },
      errors(err) {
        console.log(err)
      },
      getCitys2() {
        axios.get('/api/city2.json').then(this.success).catch(this.errors)
      },
    },
    mounted() {
      this.getCitys2();
    }
  }
</script>
<style lang="stylus" scoped>

</style>
